let total = 0

let query = {
  pagenum: 1, // 页码
  pagesize: 4, // 每页多少条
  cate_id: '', // 分类
  state: '', // 状态
}

// 一. 获取文章列表
function load_articles() {
  axios
    .get('http://api-breakingnews-web.itheima.net/my/article/list', {
      headers: {
        Authorization: localStorage.getItem('token'),
      },
      params: query,
    })
    .then(res => {
      console.log('获取文章列表', res.data)

      // 赋值 total
      total = res.data.total
      setPage()

      let list = res.data.data

      $('tbody').empty()

      list.forEach(v => {
        let theTr = `<tr>
            <td>${v.title}</td>
            <td>${v.cate_name}</td>
            <td>${moment(v.pub_date).format('YYYY-MM-DD hh:mm:ss a')}</td>
            <td>${v.state}</td>
            <th>
            <button myid="${
              v.Id
            }" type="button" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>
            </th>
        </tr>`

        $('tbody').append(theTr)
      })
    })
}
load_articles()

// 二. 获取分类
function load_cates1() {
  mg_getCategory(res => {
    let list = res.data.data

    list.forEach(v => {
      var theOption = `<option value="${v.Id}" lay-verify="cate">${v.name}</option>`
      $('select[name=category]').append(theOption)
    })
    layui.form.render('select', 'category')
  })

  // axios
  //   .get('http://api-breakingnews-web.itheima.net/my/article/cates', {
  //     headers: {
  //       Authorization: localStorage.getItem('token'),
  //     },
  //   })
  //   .then(res => {
  //     console.log('分类', res.data.data)

  //     let list = res.data.data

  //     list.forEach(v => {
  //       var theOption = `<option value="${v.Id}" lay-verify="cate">${v.name}</option>`
  //       $('select[name=category]').append(theOption)
  //     })
  //     layui.form.render('select', 'category')
  //   })
}

load_cates1()

// 三. 点击筛选按钮
$('.search').on('submit', e => {
  //1. 阻止
  e.preventDefault()

  //2. 获取值
  // let a = $('select[name=category]').val()
  // let b = $('select[name=state]').val()
  // console.log('筛选值:', a, b)

  query.cate_id = $('select[name=category]').val()
  query.state = $('select[name=state]').val()

  //3. 重新获取
  load_articles()
})

// 四. 分页
function setPage() {
  layui.laypage.render({
    elem: 'page', // 布局分页的容器 ID
    count: total, //数据总数，从服务端得到
    limit: query.pagesize, // 每页的个数
    curr: query.pagenum, // 当前页码
    jump: function (obj, first) {
      if (!first) {
        console.log('obj:', obj.curr)
        // 点击的当前页
        query.pagenum = obj.curr
        // 每一个的个数
        query.pagesize = obj.limit

        // 重新获取
        load_articles()
      }
    },
  })
}

// 五. 点击删除
$('.layui-table').on('click', '.del', e => {
  console.log('点击删除')
  //1. 弹框
  layer.confirm('您确定要删除吗?', { icon: 3, title: '提示' }, function (index) {
    //do something

    //1.5 点击删除按钮的时候, 获取它的属性id值  $(this) e.target
    let a = e.target.getAttribute('myid')

    //2. 发送请求
    axios
      .get(`http://api-breakingnews-web.itheima.net/my/article/delete/${a}`, {
        headers: {
          Authorization: localStorage.getItem('token'),
        },
      })
      .then(res => {
        console.log('删除', res.data)
        //2.1. 提示
        layer.msg('删除成功', { icon: 1 })
        //2.2. 刷新
        load_articles()
      })

    layer.close(index)
  })
})
